<template>
  <div id='authentic'>
    <div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
      <div style='display: flex;display: -webkit-flex;justify-content: center'>
        <div v-show='!showDataDetail&&!showSupplierDetail'>
          <div class='filter-wrapper'>
            <div class='filter-inner' style='margin-top: 20px'>
              <span style='color:white;width: 80px'>分类：</span>
              <el-radio-group v-model='selectedCategory' size='small'>
                <el-radio-button plain v-for='item in categoryList' :key='item.id' class='radio' :label='item.value'>
                  <div>{{ item.localName }}</div>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class='filter-inner'>
              <span style='color:white;width: 80px'>类型：</span>
              <el-radio-group v-model='selectedType' size='small'>
                <el-radio-button plain v-for='item in typeList' :key='item.id' class='radio' :label='item.value'>
                  <div>{{ item.localName }}</div>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class='filter-inner'>
              <span style='color:white;width: 80px'>确权状态：</span>
              <el-radio-group v-model='proprietorshipStatus' size='small'>
                <el-radio-button plain v-for='item in authorityList' :key='item.id' class='radio' :label='item.value'>
                  <div>{{ item.label }}</div>
                </el-radio-button>
              </el-radio-group>
              <el-button type='primary' size='mini' @click='searchForList(0)'
                         style='width: 75px;margin-top: 5px;margin-left: 6.5%;'>筛选
              </el-button>

            </div>
            <el-button type='success' size='mini' @click='create()'
                       style='width: 75px;margin-top: 5px;margin-left: 90%;display: block;'>新建
            </el-button>

          </div>
          <div class='list-wrapper'>
            <el-card v-for='item in dataList' :key='item.id' style='margin: 10px'>
              <div class='card-content'>
                <div>
                  <el-image :src='item.imageUrl' alt='数据图片' class='card-image' />
                </div>
                <div style='margin-top: 10px;margin-left: 30px'>
                  <el-row style='width: 70%'>
                    <el-col :span='6'>
                      <el-tooltip placement='right'>
                        <!--                        <div slot="content">所有权：{{item.ownRight}}<br/>-->
                        <!--                          交易权：<span v-for='tradingItem in item.tradingRightList'>{{tradingItem.name}}&nbsp&nbsp</span><br/>-->
                        <!--                          使用权：<span v-for='usingItem in item.usingRightList'>{{usingItem.name}}&nbsp&nbsp</span></div>-->
                        <span class='data-name' @click='toDataDetail(item)'>{{ item.name }}</span>
                      </el-tooltip>
                    </el-col>
                    <el-col :span='4'>
                      <el-tag :type="item.proprietorshipStatus === 'APPROVED' ?'success':'warning'"
                              style='margin-left: 20px' effect='dark'>{{ item.proprietorshipStatusLocalName }}
                      </el-tag>
                    </el-col>
                    <el-col :span='4'>
                      <el-tag :type='checkStatus(item.resourceApplyStatus)' effect='dark'>
                        {{ item.resourceApplyStatusLocalName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                  <div style='margin-top: 10px'>
                    <span class='text-description'>{{ item.description }}</span>
                  </div>
                  <div style='display:flex;justify-content:space-between;align-items:center;margin-top:20px;'>
                    <el-descriptions :column='4'>
                      <el-descriptions-item label='供应商'>
                        <el-tooltip placement='right'>
                          <span style='cursor: pointer'>{{ item.dataSupplier }}</span>
                        </el-tooltip>
                      </el-descriptions-item>
                      <el-descriptions-item label='分类'>{{ item.dataCategory }}</el-descriptions-item>
                      <el-descriptions-item label='类型'>{{ item.dataType }}</el-descriptions-item>
                      <el-descriptions-item label='价格'> {{ item.price !== 0 && item.price !== null ? '￥' + item.price : item.price }}</el-descriptions-item>
                    </el-descriptions>
                    <el-button v-if='checkButtonShow(item.proprietorshipStatus, item.resourceApplyStatus)' style='margin-top: -12px;'
                               :type=buttonCheckStatus(item.resourceApplyStatus) size='mini'
                               @click='buttonOnclick(item.resourceApplyStatus,item.id,item.usageRightDetail)'
                    >{{ buttonLabel(item.resourceApplyStatus) }}</el-button>

                    <el-button v-if='"APPROVED"=== item.proprietorshipStatus && item.resourceApplyStatus==="DOWNLOADABLE"' style='margin-top: -12px;'
                               :type="success" size='mini'
                               @click='dialogVisibleH = true'
                    >区块信息</el-button>

                    <el-button v-if='"APPROVED"=== item.proprietorshipStatus && item.resourceApplyStatus==="DOWNLOADABLE"' style='margin-top: -12px;'
                               :type="success" size='mini'
                               @click='downloadFile(item.id)'
                               :disabled="item.userId !== userId"
                    >证书下载</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <div style='margin-right: 30px'>
            <el-pagination
              @size-change='handleSizeChange'
              :page-sizes='[5, 10, 15, 20]'
              layout='total, sizes, prev, pager, next, jumper'
              :total='totalItems'
              :page-size='pageSize'
              @current-change='handlePageChange'
            ></el-pagination>
          </div>
        </div>

        <el-dialog title="数据申请" :visible.sync="dialogVisible" width="30%">
          <el-form :model="form">
            <el-form-item label="使用权明细" :rules="[{ required: true, message: '请选择确权', trigger: 'change' }]">
              <el-select v-model="form.rights" multiple placeholder="请选择" style="width: 440px;">
                <el-option v-for="item in rightsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="开始时间" :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]">
              <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
              <el-input type="textarea" v-model="form.note" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </div>
        </el-dialog>

        <el-dialog title="以太坊区块高度" :visible.sync="dialogVisibleH" width="600px">
          <div v-for="item in hashData">
            <div>
              <span>区块：</span>
              <el-link type="primary">{{ item.block }}</el-link>
            </div>
            <div>
              <span>由 </span>
              <el-link type="primary">{{  item.miner  }}</el-link>
              <span> 开采</span>
              <span style="float: right;">矿工费</span>
            </div>
            <div>
              <span>在 </span>
              <el-link type="primary">{{ item.time }}</el-link>
              <span> 秒内完成 </span>
              <el-link type="primary">{{ item.count }}</el-link>
              <span> 笔交易</span>
              <el-tag style="float: right;" type="success" size="mini">{{ item.fee }} ETH</el-tag>
            </div>
            <hr/>
          </div>
        </el-dialog>

        <div v-show='showDataDetail' style='width: 80%'>
          <el-card class='detail-card'>
            <el-button type='text' @click='showDataDetail=false'
                       style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
            </el-button>
            <div class='detail-content' style='font-size: 11pt'>
              <img :src='currentDataDetail.image' alt='数据图片' class='detail-image' style='margin-top: 30px' />
              <div style='margin-top: 30px;margin-left: 30px'>
                <el-row style='width: 90%'>
                  <el-col :span='9'>
                    <span class='data-name' style='font-size: 14pt'>{{ currentDataDetail.name }}</span>
                  </el-col>
                  <el-col :span='6'>
                    <el-tag :type="currentDataDetail.isAuthorized?'success':'warning'" style='margin-left: 20px'
                            effect='dark'>{{ currentDataDetail.isAuthorized ? '已确权' : '确权中' }}
                    </el-tag>
                  </el-col>
                </el-row>
                <div style='margin-top: 20px'>
                  <span class='text-description'>{{ currentDataDetail.description }}</span>
                </div>

                <el-descriptions :column='2' style='margin-top:20px;width: 50%;font-size: 11pt'>
                  <el-descriptions-item label='数据提供者'>{{ currentDataDetail.dataSupplier }}</el-descriptions-item>
                  <el-descriptions-item label='价格'>
                    <template v-if="currentDataDetail.price !== 0 && currentDataDetail.price !== null">
                      ￥{{ currentDataDetail.price }}
                    </template>
                    <template v-else>
                      {{ currentDataDetail.price }}
                    </template>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
          <el-card class='detail-card'>
            <div class='detail-description'>
              <div>
                <span class='title-name'>数据信息：</span>
              </div>
              <el-descriptions title=' ' :column='3' style='width:100%;font-size: 11pt' border>
                <el-descriptions-item label='数据名称'>{{ currentDataDetail.name }}</el-descriptions-item>
                <el-descriptions-item label='数据类型'>{{ currentDataDetail.dataType }}</el-descriptions-item>
                <el-descriptions-item label='数据分类'>{{ currentDataDetail.dataCategory }}</el-descriptions-item>
                <el-descriptions-item label='注册时间'>{{ currentDataDetail.registrationTime | formatDate   }}</el-descriptions-item>
                <el-descriptions-item label='数据格式'>{{ currentDataDetail.dataFormat }}</el-descriptions-item>
                <el-descriptions-item label='数据大小'>{{ currentDataDetail.dataSize }}</el-descriptions-item>
              </el-descriptions>
              <div style='margin-top: 20px'>
                <span class='title-name'>数据样例：</span>
              </div>
              <el-descriptions title='' :column='3' style='width:100%;font-size: 11pt;margin-top: 20px' border>
                <el-descriptions-item v-for='item in currentDataDetail.dataExample' :key='item.label'
                                      :label='item.label'>
                  {{ item.value }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
          <el-card class='detail-card'>
            <div class='detail-description' style='padding-bottom:0;'>
              <div>
                <span class='title-name'>权属信息：</span>
              </div>

              <div  class='table_box'>
                <el-table
                  :data='currentDataDetail.ownerships'
                  border
                  style='width:100%'>
                  <el-table-column prop='userName' label='名称' :show-overflow-tooltip='true' min-width="50">
                  </el-table-column>
                  <el-table-column prop='ownershipEffectiveTime' label='确权生效时间' :show-overflow-tooltip='true' :formatter='formatDateTime' min-width="90"></el-table-column>
                  <el-table-column prop='ownershipEndTime' label='确权结束时间' :show-overflow-tooltip='true' :formatter='formatDateTime'min-width="90"></el-table-column>
                  <el-table-column prop='ownershipType' label='权属类型' :show-overflow-tooltip='true' min-width="50"></el-table-column>
                  <el-table-column prop='ownershipProof' label='确权证明' :show-overflow-tooltip='true' ></el-table-column>
                  <el-table-column prop='ownershipTime' label='确权时间' :show-overflow-tooltip='true' :formatter='formatDateTime' min-width="90"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-card>
        </div>

        <div v-show='showSupplierDetail' style='width: 80%'>
          <el-card class='detail-card'>
            <el-button type='text' @click='showSupplierDetail=false'
                       style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
            </el-button>
            <div class='detail-description' style='padding-bottom:0;'>
              <div>
                <span class='title-name'>账户信息：</span>
              </div>

              <div id='supplierParentDiv'>
                <div id='supplierDiagramDiv' style=' width:100%;height:20vh' />
              </div>
            </div>
          </el-card>
          <el-card class='detail-card'>
            <el-tabs v-model='activeName' type='card'>
              <el-tab-pane label='数据登记信息' name='1'>
                <div class='detail-description'>
                  <!--<div>
                    <span class="title-name">数据登记信息：</span>
                  </div>-->
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>已确权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.confirmedDataList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(scope.row)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='registrationTime' label='注册时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='confirmedTime' label='确权时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                    </el-table>
                  </div>
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>未确权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.unconfirmedDataList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='registrationTime' label='注册时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label='数据交易信息' name='2'>
                <div class='detail-description'>
                  <!--<div>
                    <span class="title-name">数据交易信息：</span>
                  </div>-->
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>交易权授权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.authorisedTradingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorisedTime' label='授权时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='被授权方' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>使用权授权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.authorisedUsingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorisedTime' label='授权时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='被授权方' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label='数据购买信息' name='3'>
                <div class='detail-description'>
                  <!--<div>
                    <span class="title-name">数据购买信息：</span>
                  </div>-->
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>交易权购买：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.purchasedTradingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='purchasedTime' label='购买时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='授权方' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>使用权购买：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.purchasedUsingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='purchasedTime' label='购买时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='授权方' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>

          </el-card>
        </div>
      </div>
    </div>

  </div>
</template>

<script src='./js/index.js'>
</script>
<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import './css/authentic.scss';
</style>
